본문으로 건너뛰기

클래스형이 아닌 함수형 컴포넌트를 사용해야 하는 이유

함수형 컴포넌트의 소개​

함수형 컴포넌트는 자바스크립트 함수를 사용하여 React 컴포넌트를 정의하는 방법입니다. 클래스형 컴포넌트와 달리, 생성자(constructor) 나 라이프사이클 메서드를 사용하지 않습니다. 대신에, React Hooks를 사용하여 상태(state)나 기타 React 기능을 구현할 수 있습니다.

import React, { useState } from 'react';

function Greeting() {
  const [name, setName] = useState('World');

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
    </div>
  );
}

export default Greeting;

위 예시는 간단한 함수형 컴포넌트를 보여줍니다. useState Hook을 사용하여 상태를 관리하며, 입력값을 변경할 때마다 상태를 업데이트합니다.

함수형 컴포넌트의 장점​

1. 코드가 간결하고 이해하기 쉬움​

함수형 컴포넌트는 클래스형 컴포넌트에 비해 코드가 더 간결합니다. 생성자나 라이프사이클 메서드가 필요 없기 때문에 코드를 읽고 이해하기 쉽습니다. 이는 특히 큰 프로젝트에서 유지보수를 용이하게 만듭니다.

2. React Hooks의 활용​

함수형 컴포넌트에서는 React Hooks를 사용하여 상태 관리, 사이드 이펙트 처리 등을 할 수 있습니다. 대표적인 Hooks에는 useState, useEffect, useContext 등이 있습니다.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>{count}</h1>;
}

export default Timer;

위 예제는 useEffect Hook을 사용하여 타이머를 구현한 예시입니다. 컴포넌트가 마운트될 때 타이머가 시작되고, 언마운트될 때 타이머가 정리됩니다.

3. 불필요한 바인딩 제거​

클래스형 컴포넌트에서는 메서드에서 this를 사용하기 때문에 바인딩이 필요합니다. 그러나 함수형 컴포넌트에서는 이러한 바인딩이 필요 없기 때문에 코드가 더 간결해집니다.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}
function Counter() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

위 두 예시는 동일한 기능을 하는 코드지만, 함수형 컴포넌트가 더 간결하고 명료합니다.

4. 성능 최적화​

함수형 컴포넌트는 클래스형 컴포넌트에 비해 가벼워 성능상 이점을 가질 수 있습니다. 또한, React.memo와 같은 최적화 기법을 사용하여 불필요한 렌더링을 방지할 수 있습니다.

import React, { memo } from 'react';

const Button = memo(({ onClick, children }) => {
  console.log('Button rendered');
  return <button onClick={onClick}>{children}</button>;
});

export default Button;

위 예제에서 memo를 사용하면, props가 변경되지 않는 한 Button 컴포넌트는 다시 렌더링되지 않습니다.

더 알아보기​

  • React Hooks: 상태와 라이프사이클 기능을 함수형 컴포넌트에서 사용할 수 있게 해주는 도구입니다.
  • useState: 함수형 컴포넌트에서 상태를 관리하는 Hook입니다.
  • useEffect: 사이드 이펙트를 처리하는 Hook입니다.
  • React.memo: 컴포넌트를 메모이제이션하여 불필요한 렌더링을 방지하는 방법입니다.

내용 요약과 다음 주제​

함수형 컴포넌트는 클래스형 컴포넌트보다 코드가 간결하고 이해하기 쉽습니다. React Hooks를 활용하여 더 직관적으로 상태와 사이드 이펙트를 관리할 수 있습니다. 다음 주제는 Props로 컴포넌트 데이터 전달에 대해 다루겠습니다. Props를 통해 어떻게 데이터를 전달하고 활용하는지 알아보겠습니다.